<template>
    <div class="content">
        <p>{{ moment(new Date()).format("MMM Do") }}</p>
        <router-link v-for="item in comingList ? comingList : movieList" :key="item.id" :to="'/moviesinfo/' + item.id">
            <MoviesItemList :item="item"></MoviesItemList>
        </router-link>
    </div>
</template>

<script setup>
import MoviesItemList from "./MoviesItemList.vue";
import { getHomeMovieList } from "../../network/Home/index";
import moment from "moment";
import "moment/locale/zh-cn";
import { defineProps, onMounted, ref } from "@vue/runtime-core";

moment.locale("zh-CN");
defineProps({
    comingList: Array,
});

const movieList = ref([]);

onMounted(async () => {
    const { movieList: res } = await getHomeMovieList();
    res.forEach((ele) => {
        ele.img = ele.img.replace("w.h", "64.90");
    });
    movieList.value = [...res];
});
</script>

<style lang="less" scoped>
.content {
    padding: 0 15px 50px 0;
    > p:first-child {
        font-size: 14px;
        padding: 15px 0 0 15px;
        background-color: #fff;
    }
}
</style>
